<template>
    <section class="area-browse">
        <div class="container">
            <h2 class="section-title">按地区浏览房产</h2>
            <p class="section-desc">无论是都市中心的繁华公寓，还是宁静郊区的独栋别墅，我们都将陪伴您一同探索，直至找到那处能真正触动您内心的理想居所。</p>
            
            <div class="area-grid">
                <!-- 上方小图 -->
                <div class="area-item">
                    <div class="area-card">
                        <div class="area-info">
                            <h3>北京</h3>
                            <span class="listing-count">25 listings</span>
                        </div>
                        <div class="icon-wrapper">
                            <svg-icon name="common/mappin" />
                        </div>
                    </div>
                </div>
                
                <div class="area-item">
                    <div class="area-card">
                        <div class="area-info">
                            <h3>上海</h3>
                            <span class="listing-count">25 listings</span>
                        </div>
                        <div class="icon-wrapper">
                            <svg-icon name="common/mappin" />
                        </div>
                    </div>
                </div>
                
                <div class="area-item">
                    <div class="area-card">
                        <div class="area-info">
                            <h3>广州</h3>
                            <span class="listing-count">25 listings</span>
                        </div>
                        <div class="icon-wrapper">
                            <svg-icon name="common/mappin" />
                        </div>
                    </div>
                </div>
                
                <!-- 下方大图 -->
                <div class="area-item large">
                    <div class="area-card">
                        <div class="area-info">
                            <h3>深圳</h3>
                            <span class="listing-count">25 listings</span>
                        </div>
                        <div class="icon-wrapper">
                            <svg-icon name="common/mappin" />
                        </div>
                        <button class="view-btn">查看详细</button>
                    </div>
                </div>
                
                <div class="area-item">
                    <div class="area-card">
                        <div class="area-info">
                            <h3>武汉</h3>
                            <span class="listing-count">25 listings</span>
                        </div>
                        <div class="icon-wrapper">
                            <svg-icon name="common/mappin" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
// 组件逻辑
</script>

<style lang="scss" scoped>
@use "sass:color" as *;

.area-browse {
    padding: 100px 0;
    background: #fff;
    
    .container {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 60px;
        margin-top: 53px;
    }
    
    .section-title {
        text-align: center;
        font-size: 32px;
        color: #2F3B59;
        margin-bottom: 16px;
    }
    
    .section-desc {
        text-align: center;
        color: #666;
        max-width: 696px;
        margin: 0 auto 40px;
        line-height: 1.6;
    }
    
    .area-grid {
        display: grid;
        grid-template-columns: repeat(3, 424px);
        grid-template-rows: repeat(2, 241px);
        gap: 24px;
        justify-content: center;  // 网格水平居中
        
        .area-item {
            position: relative;
            height: 241px;
            border-radius: 8px;
            overflow: hidden;
            
            &.large {
                grid-column: span 2;
                width: 872px;
            }
            
            .area-card {
                position: relative;
                height: 80%;
                background-size: cover;
                background-position: center;
                padding: 24px;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                cursor: pointer;
                
                // 背景图片容器
                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background-size: cover;
                    background-position: center;
                    transform: none;
                    transition: 0.3s;
                    z-index: 0;
                }
                
                // 渐变遮罩
                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
                    z-index: 1;
                }
                
                &:hover::after {
                    transform: none;
                }
                
                .icon-wrapper {
                    position: absolute;
                    bottom: 24px;
                    z-index: 2;
                    width: 24px;
                    height: 24px;
                    
                    .svg-icon {
                        width: 24px;
                        height: 24px;
                        color: #fff;
                    }
                }
            }
            
            &:nth-child(1) .area-card::after { background-image: url('@/assets/images/areas/arlington.jpg'); }
            &:nth-child(2) .area-card::after { background-image: url('@/assets/images/areas/washington.jpg'); }
            &:nth-child(3) .area-card::after { background-image: url('@/assets/images/areas/franklin.jpg'); }
            &:nth-child(4) .area-card::after { background-image: url('@/assets/images/areas/clinton.jpg'); }
            &:nth-child(5) .area-card::after { background-image: url('@/assets/images/areas/centerville.jpg'); }
            
            .area-info {
                position: relative;
                z-index: 2;
                color: #fff;
                
                h3 {
                    font-size: 24px;
                    margin-bottom: 8px;
                }
                
                .listing-count {
                    font-size: 14px;
                    opacity: 0.8;
                }
            }
            
            .view-btn {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                padding: 8px 24px;
                background: transparent;
                color: #fff;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: 0.3s;
                
                &:hover {
                    background: var(--light-hover);
                    transform: translate(-50%, -50%) none;
                }
            }
        }
    }
}
</style> 